<template>
	<view>
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed alpha customBack :bottomShadow="true">
			<view slot="back" :isBack="true" class='tn-custom-nav-bar__back'>
				<text v-if="!showHome" class='icon tn-icon-left' @click="goBack"></text>
				<text v-if="showHome" class='icon tn-icon-home-capsule-fill' @click="goHome"></text>
			</view>
			<view class="tn-flex tn-flex-col-center tn-flex-row-center ">
				<text class="tn-text-bold tn-text-xl tn-color-black">测试分类</text>
			</view>
		</tn-nav-bar>


		<view :style="{marginTop:vuex_custom_bar_height + 'px',height:windowHeight + 'px'}">
			<!-- 1. 头部的搜索 -->
			<div style='display: flex;width: 100%;justify-content:space-between;align-items: center;'>
				<div style="width: 100%;">
					<!-- 1.搜索栏 -->
					<van-search :style="{'margin-top': vuex_custom_bar_height + 'px'}" :value="searchKey"
						placeholder="请输入测试内容进行搜索" @search="searchManager" @change="searchChangeManager">
					</van-search>
				</div>
			</div>

			<view style="width: 100%;" :style="{height:scrollViewHeight + 'px'}">
				<van-tabs
				color="#3465CC"
				 title-active-color="#3D7EFF"
				 swipeable animated :active="tabActive" @change="tabsActionEventManager">
					<van-tab v-for="(item,tabIndex) in tabList" :key="item.id" :title="item.name" :name="item.name">
						<scroll-view :style="{ height:scrollViewHeight - 60  + 'px'}" refresher-enabled="true"
							scroll-y="true" show-scrollbar="true" lower-threshold="200" enable-back-to-top="true"
							:refresher-triggered="refreshtriggered"
							@refresherrefresh="refresherrefreshManager(item.name)"
							@refresherrestore="refresherrestoreManager(item)"
							@scrolltolower="scrolltolowerManager(item)">
							<view v-if="contentList.length" class="tn-flex tn-flex-wrap tn-margin-sm">
								<block v-for="(content, index) in contentList" :key="index">
									<HomeItem style="width:50%" :transferItem="content"
										@actionEventManager="homeItemSelectedManager" />
								</block>
							</view>

							<van-empty v-else image="error" description="当前无数据" />

						</scroll-view>
					</van-tab>

				</van-tabs>

			</view>
		</view>

		<!-- 自动登录模块 -->
	</view>
</template>

<script>
	import {
		SubjectSubjectList,
		SubjectSubSubjectList
	} from '@/api/home.js'
	import HomeItem from '@/components/QuestionItem/index.vue'

	export default {
		name: 'FIND',
		components: {
			HomeItem,
		},

		data() {
			return {
				// 0.是否显示回到首页按钮
				showHome: getCurrentPages().length == 1 ? true : false,

				type: 'normal',
				// 1. 判断是否登录 
				hasLogin: false,

				windowHeight: 0,
				scrollViewHeight: 0,
				// 1. tabList
				tabList: [],
				tabActive: '',

				// tableList;
				infoDic: {},
				contentList: [],


				// 1.搜索key
				searchKey: '',

				// 搜索参数

				refreshStatus: false, // 是否下拉过程
				refreshtriggered: true, // 复位状态 && 下拉状态

			}
		},

		onLoad(item) {
			if (item) {
				var that = this;
				this.interfaceSubjectSubjectList(item.name);
			}
		},
		onShow() {
			console.log('页面显示')
		},
		onReady() {
			console.log('页面初次显示')
			var windowHeight = uni.getSystemInfoSync().windowHeight;
			var safeArea = uni.getSystemInfoSync().safeArea.bottom - uni.getSystemInfoSync().safeArea.height;
			var vuex_custom_bar_height = this.vuex_custom_bar_height;
			this.windowHeight = windowHeight - vuex_custom_bar_height - safeArea;
			this.scrollViewHeight = this.windowHeight;
		},
		onHide() {
			console.log('页面隐藏')
		},
		onUnload() {
			console.log('页面卸载')
		},
		onBackPress() {
			console.log('页面返回...')
		},
		onShareAppMessage() {
			console.log('分享!')
		},
		onReachBottom() {
			console.log('下拉加载...')
		},
		onPageScroll() {
			console.log('页面滚动...')
		},
		onPullDownRefresh() {

		},

		methods: {
			goBack() {
				uni.navigateBack();
			},
			goHome() {
				uni.reLaunch({
					url: '/pages/root/main'
				});
			},


			// 接口获取列表
			interfaceSubjectSubjectList(item) {
				var that = this;
				SubjectSubjectList().then(res => {
					that.tabList = res.list;

					res.list.forEach((item, index) => {
						var singleItem = {
							id: item.id,
							pageSize: 10,
							pageNumber: 1,
							refreshStatus: false, // 是否下拉过程
							refreshtriggered: true, // 复位状态 && 下拉状态
							list: [],
						}
						that.infoDic[item.name] = singleItem;
					});

					if (item){
						that.tabActive = item;
					} else {
						that.tabActive = that.tabList[0].name
					}
					
					that.interfacekdOrderList(true).then(res1 => {
						
						
					});

				});
			},


			// tab点击事件
			tabsActionEventManager(event) {
				this.tabActive = event.detail.title;
				
				if (this.infoDic[this.tabActive].list.length == 0) {
					this.infoDic[this.tabActive].refreshStatus = true;
					this.infoDic[this.tabActive].refreshtriggered = true;
					this.refreshtriggered = this.infoDic[this.tabActive].refreshtriggered
					this.refreshStatus = this.infoDic[this.tabActive].refreshStatus
					this.interfacekdOrderList(true);
				} else {


					this.contentList = this.infoDic[this.tabActive].list;
				}
			},

			searchChangeManager(item) {
				
				this.searchKey= item.detail;
				this.interfacekdOrderList(true)
			},

			// 获取列表
			interfacekdOrderList(hasReload) {
				var params = {}
				if (hasReload === true) {
					this.infoDic[this.tabActive].pageNumber = 1;
				} else {
					this.infoDic[this.tabActive].pageNumber += 1;
				}


				params.pageNumber = this.infoDic[this.tabActive].pageNumber;
				params.subjectId = this.infoDic[this.tabActive].id;
				params.keyword = this.searchKey;

				var that = this;

				return new Promise(resolve => {
					SubjectSubSubjectList(params).then(res => {
						
						console.log(that.tabActive);

						// 1. 判断dic 有没有这个内容
						var smartItem = {};

						var newList = [];
						if (hasReload === true) {
							newList = res.list;
						} else {
							var lastList = that.infoDic[that.tabActive].list;
							newList = [...lastList, ...res.list];
						}



						that.infoDic[that.tabActive].list = newList;

						that.contentList = newList;


						resolve(res.list);
					});
				})

			},


			// 下拉状态信息  自定义下拉刷新被触发	
			refresherrefreshManager(item) {
				console.log('自定义下拉刷新被触发')
				if (item !== this.tabActive) {
					return;
				}
				var that = this;
				
				this.infoDic[this.tabActive].refreshStatus = true
				this.infoDic[this.tabActive].refreshtriggered = true;
				this.infoDic[this.tabActive].pageNumber = 1;

				this.refreshtriggered = this.infoDic[this.tabActive].refreshtriggered
				this.refreshStatus = this.infoDic[this.tabActive].refreshStatus

				this.interfacekdOrderList(true).then(res => {
					
					that.infoDic[that.tabActive].refreshStatus = false;
					that.infoDic[that.tabActive].refreshtriggered = false;

					this.refreshtriggered = this.infoDic[this.tabActive].refreshtriggered
					this.refreshStatus = this.infoDic[this.tabActive].refreshStatus

				});
			},
			// 3.自定义下拉刷新被复位
			refresherrestoreManager(item) {
				// if (item !== this.tabActive) {
				// 	return;
				// }

				this.infoDic[this.tabActive].refreshtriggered = 'restore' // 需要重置
			},

			// 上啦
			scrolltolowerManager(item) {
				
				if (item.name !== this.tabActive) {
					return;
				}
				this.interfacekdOrderList(false);
			},


			// 搜索方法
			searchManager() {


			},
		}
	}
</script>

<style lang="scss" scoped>
	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 60%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

	}

	// 1. 主视图
	.content {
		height: 100%;
		background-color: red;
	}

	.bottom-button {
		width: 900rpx;
		height: 80rpx;
	}
</style>

<style lang="scss">
	.vant-bottom-button {
		width: 900rpx;
		height: 80rpx;
	}
</style>